<template>
  <div class="box">
    <el-form size="medium" ref="itemForm" label-width="100px">
      <el-form-item label="订单编号" style="color:#606266;">{{comment.order_no}}</el-form-item>

      <el-form-item label="商品" style="color:#606266;">{{comment.name}}</el-form-item>

      <el-form-item label="评论分数" style="color:#606266;">
        <el-rate v-model="comment.score_value" disabled></el-rate>
      </el-form-item>

      <el-form-item label="评论内容" style="color:#606266;">{{comment.content}}</el-form-item>

      <el-form-item label="评论图片" v-if="comment.img_url.length">
        <div class="pics">
          <div class="pic" v-for="(item,i) in comment.img_url" :key="i">
            <a :href="item" target="_blank">
              <vimage style="width: 80px; height: 80px;" :src="item" fit="fill"></vimage>
            </a>
          </div>
        </div>
      </el-form-item>

      <el-form-item label="评论人" style="color:#606266;">{{comment.nickname}}</el-form-item>

      <el-form-item label="审核结果" style="color:#606266;">
        <span v-if="comment.state =='1'" style="color:#F56C6C;">未审核</span>
        <span v-if="comment.state =='2'" style="color:#67C23A;">已审核</span>
        <span v-if="comment.state =='3'">驳回</span>
      </el-form-item>

      <el-form-item label="审核备注">{{comment.remake}}</el-form-item>

      <el-form-item label="掌柜回复">{{comment.reply}}</el-form-item>
    </el-form>
  </div>
</template>
<script>
import { auditComment } from "@/api/shop/comment";
export default {
  name: "commentAudit",
  data() {
    return {
      isLoading: false
    };
  },
  watch: {},
  props: {
    comment: {
      type: Object,
      default: function() {
        return {};
      }
    }
  },
  methods: {}
};
</script>

<style lang="scss" scoped>
//覆盖分数样式以水平对齐
.el-rate {
  display: inline-block;
  vertical-align: middle;
}

.box {
  padding-right: 20px;
  max-height: 600px;
  overflow-y: auto;
}

.el-form-item {
  margin-bottom: 15px;
}

.pics {
  display: flex;
  flex-wrap: wrap;

  .pic {
    width: 80px;
    height: 80px;
    border: 1px solid #ebeef5;
    margin-right: 10px;
    margin-top: 10px;
  }
}
</style>
